<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>修改</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Bootstrap CSS
         ============================================ -->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap1.min.css}">
    <!-- Bootstrap CSS
        ============================================ -->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/font-awesome.min.css}">

    <!-- normalize CSS
        ============================================ -->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/data-table/bootstrap-table.css}">
    <link rel="stylesheet" type="text/css"  th:href="@{/css/data-table/bootstrap-editable.css}">
    <!-- style CSS
        ============================================ -->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/style.css}">
    <!-- responsive CSS
        ============================================ -->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/responsive.css}">
    <!-- modernizr JS
        ============================================ -->
    <script src="/js/vendor/modernizr-2.8.3.min.js" th:src="@{/js/vendor/modernizr-2.8.3.min.js}"></script>

    <!-- jquery
        ============================================ -->
    <script src="/js/vendor/jquery-1.12.4.min.js" th:src="@{/js/vendor/jquery-1.12.4.min.js}" ></script>
    <!-- bootstrap JS
        ============================================ -->
    <script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

    <!-- data table JS
        ============================================ -->
    <script src="/js/data-table/bootstrap-table.js" th:src="@{/js/data-table/bootstrap-table.js}"></script>
    <script src="/js/data-table/tableExport.js" th:src="@{/js/data-table/tableExport.js}"></script>
    <script src="/js/data-table/data-table-active.js" th:src="@{/js/data-table/data-table-active.js}"></script>
    <script src="/js/data-table/bootstrap-table-editable.js" th:src="@{/js/data-table/bootstrap-table-editable.js}"></script>
    <script src="/js/data-table/bootstrap-editable.js" th:src="@{/js/data-table/bootstrap-editable.js}"></script>
    <script src="/js/data-table/bootstrap-table-resizable.js" th:src="@{/js/data-table/bootstrap-table-resizable.js}"></script>
    <script src="/js/data-table/colResizable-1.5.source.js" th:src="@{/js/data-table/colResizable-1.5.source.js}"></script>
    <script src="/js/data-table/bootstrap-table-export.js" th:src="@{/js/data-table/bootstrap-table-export.js}"></script>
    <!--  editable JS
        ============================================ -->
    <script src="/js/editable/jquery.mockjax.js" th:src="@{/js/editable/jquery.mockjax.js}"></script>
    <script src="/js/editable/mock-active.js" th:src="@{/js/editable/mock-active.js}"></script>
    <script src="/js/editable/select2.js" th:src="@{/js/editable/select2.js}"></script>
    <script src="/js/editable/moment.min.js" th:src="@{/js/editable/moment.min.js}"></script>
    <script src="/js/editable/bootstrap-datetimepicker.js" th:src="@{/js/editable/bootstrap-datetimepicker.js}"></script>
    <script src="/js/editable/bootstrap-editable.js" th:src="@{/js/editable/bootstrap-editable.js}"></script>
    <script src="/js/editable/xediable-active.js" th:src="@{/js/editable/xediable-active.js}"></script>

    <!-- tab JS
        ============================================ -->
    <script src="/js/tab.js" th:src="@{/js/tab.js}"></script>
    <!-- plugins JS
        ============================================ -->
    <script src="/js/plugins.js" th:src="@{/js/plugins.js}"></script>
    <!-- main JS
        ============================================ -->
    <script src="/js/main.js" th:src="@{/js/main.js}"></script>
</head>


<body>


                <form>
                    <div  class="form-group">
                        <label for="name" class="control-label">员工姓名：</label>
                        <input type="text" class="form-control" id="name" th:value="${att.name}">
                    </div>
                    <div class="form-group">
                        <label for="employeeId" class="control-label">员工编号：</label>
                        <input type="text" class="form-control" id="employeeId" th:value="${att.employeeId}">
                    </div>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id" th:value="${att.id}">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">员工所属部门：</label>
                        <select class="form-control" name="dept" id="dept"  >
                            <option value="销售部">销售部</option>
                            <option value="仓储部">仓储部</option>
                            <option value="售后部">售后部</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="reason" class="control-label">记录原因：</label>
                        <input type="text" class="form-control"  name="reason" id="reason" th:value="${att.reason}">
                    </div>

                    <div class="form-group">
                        <label for="attendanceDate" class="control-label">考勤记录日期：</label>
                        <input type="date" class="form-control" name="attendanceDate"  id="attendanceDate" th:value="${att.attendanceDate}">
                    </div>
                </form>
            </div>
                <div>
                    <button type="submit" class="btn btn-primary" onclick="edit();">修改</button>
                    <input type="button"  onclick="back();" th:value="返回"/>
                </div>
                <script th:inline="javascript">

                   back = function () {
                        window.history.go(-1);
                    }

                   edit = function (){
                       var id = $("#id").val();
                       var name = $("#name").val();
                       var employeeId = $("#employeeId").val();
                       var dept = $("#dept").val();
                       var reason = $("#reason").val();
                       var attendanceDate = $("#attendanceDate").val();
                        $.ajax({
                            url : "/attendance/update",
                            type: "post",
                            data: {
                                "name": name,
                                "employeeId": employeeId,
                                "dept": dept,
                                "reason": reason,
                                "attendanceDate": attendanceDate,
                                "id": id
                        },
                            success: function (data) {
                                console.log(data)
                                console.log("编辑成功");
                                alert("编辑成功！")
                    //
                                //返回列表
                                window.history.go(-1);
                            },
                            error: function () {
                                alert("编辑失败！")
                            }
                    })
                    }

                </script>
</form>


</div>


</body>

</html>